<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="专家姓名" prop="name" style="width: 360px;">
                <el-input type="text" v-model="ruleForm.name">
                </el-input>
            </el-form-item>
            <el-form-item label="所属分类" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择分类">
                    <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属领域" prop="domain" style="width: 360px;">
                <el-input type="text" v-model="ruleForm.domain">
                </el-input>
            </el-form-item>
            <el-form-item label="专家照片" prop="headImg">
                <el-upload list-type="picture-card" :action="action" :show-file-list="false" :headers="headers"
                    :on-success="successFile" :before-upload="beforeAvatarUpload" name="files">
                    <img v-if="ruleForm.headImg" :src="ruleForm.headImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="专家简介">
                <Toolbar style="border-bottom: 1px solid #ccc;" :editor="editorRef"
                    :defaultConfig="editorConfig.toolbarConfig" :mode="mode" />
                <Editor style="height: 400px;border-radius: 5px;" v-model="valueHtml" :defaultConfig="editorConfig"
                    :mode="mode" @onCreated="handleCreated" />
            </el-form-item>
            <el-form-item style="z-index: 99999;margin-bottom: 30px;">
                <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                <el-button @click="$router.go(-1)">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { toolbarConfig, MENU_CONF } from './wangeditors.js'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { saveExpert} from "@/request/supervisionCenterApi.js"
export default {
    components: {
        Editor, Toolbar
    },
    data() {
        return {
            id: '',
            mode: 'default',
            options: [
                "果业中心技术人员","西农专家","农民","院士","技术工程师"
            ],
            editorRef: null,
            showEdit: true,
            valueHtml:"",
            showImg:'http://47.108.220.160:90/jcApi/plant/file/show/',
            action: 'http://47.108.220.160:90/jcApi/plant/file/upload',
            headers: {
                common: {
                    token: JSON.parse(window.sessionStorage.getItem("token"))
                }
            },
            ruleForm: {
                companyId: localStorage.getItem("companyId"),
                domain: '',
                type: '',
                headImg: "",
                name:"",
                introduce:"",
            },
            valueHtml:"",
            rules: {
                type: [
                    { required: true, message: '请选择页面', trigger: 'change' }
                ],
                headImg: [
                    { required: true, message: '请至少选择一个张图片', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请填写姓名', trigger: 'blur' }
                ],
                domain:[
                    { required: true, message: '请填写领域', trigger: 'blur' }
                ]
            },
            editorConfig: {
                placeholder: '请输入内容...',
                //配置工具栏
                toolbarConfig: toolbarConfig,
                MENU_CONF: MENU_CONF,
            }
        }
    },
    mounted() {
        if(JSON.stringify(this.$route.query)!='{}'){
            this.ruleForm = JSON.parse(decodeURIComponent(this.$route.query.data))
            console.log(this.ruleForm)
            if(this.$route.query.isShow=='1'){
                this.showEdit=true
            }else{
                this.showEdit = false
            }

        }else{
           this.showEdit=true
        }
    },
    methods: {
        handleCreated(editor) {
            this.editorRef = editor // 记录 editor 实例
            this.valueHtml = this.$route.query.introduce
        },
        successFile(res, file) {
            this.ruleForm.headImg =this.showImg + res.data.fileName
        },
        beforeAvatarUpload(file) {

        },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    console.log(this.ruleForm)
                    this.ruleForm.introduce = this.valueHtml
                    let res=  await saveExpert(this.ruleForm)
                    console.log(res)
                    if(res.code==200){
                        this.$message.success('提交成功！')
                        this.$router.go(-1)
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    beforeDestroy() {
        // 组件销毁时，也及时销毁编辑器
        const editor = this.editorRef
        if (editor == null) return
        editor.destroy()
    }
}
</script>
<style scoped>
.w-e-toolbar {
    z-index: 2 !important;
}

.w-e-menu {
    z-index: 2 !important;
}

.w-e-text-container {
    z-index: 1 !important;
}
.avatar{
    width: 147px;
    height: 147px;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
